<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

        <title>TreeViewDeleteTest</title>

        <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
        <link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css">
        <link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">

        <style type="text/css">
            h1
            {
                font-weight: bold;
                margin: 0 0 1em 0;
            }
            body
            {
                padding: 1em;
            }
            p, ul
            {
                margin: 1em 0;
            }
            p em,
                #operainstructions li em
            {
                font-weight: bold;
            }
            #operainstructions
            {
                list-style-type: square;
                margin-left: 2em;
            }

        </style>

        <script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="../../build/container/container_core.js"></script>
        <script type="text/javascript" src="../../build/treeview/treeview-debug.js"></script>
        <script type="text/javascript" src="../../build/menu/menu.js"></script>


        
        <link type="text/css" rel="stylesheet" href="../../build/logger/assets/skins/sam/logger.css">
        <script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
        <script type="text/javascript" src="../../build/logger/logger-min.js"></script>
    </head>

    <body class="yui-skin-sam">
        <div id="readme">
            <hr>
            <pre>
Select the node named 'And'
Bring up the context menu (right mouse click)
Select 'Delete'
Observe:
    The alert reports the removeNode() call was successful
    The rendering of the tree shows the 'And' node and all it's children are gone
    The node map is properly cleaned up
    Traversing the node list returned by getTreeDefinition() still shows the removed nodes
            </pre>
            <hr>
        </div>
        <div id="mytreeview"></div>
        <div id="treecontents"></div>
    </body>

    <script type="text/javascript">
        YAHOO.util.Event.onAvailable(
            "mytreeview",
            function ()
            {
                var oTreeView = new YAHOO.widget.TreeView("mytreeview");
                var oTextNodeMap = {};
                var expanded = true;
                var oCurrentTextNode = null;
                var oTextNodeImmutable;
                var oTextNodeMutable;
                var oTextNodeAnd;
                var oTextNode;
                var buf;

                function printTree(tv, level)
                {
                    if (tv)
                    {
                        for (var j in tv)
                        {
                            for (var i = 0; i < level; i++)
                            {
                                buf += "    ";
                            }
                            
                            buf += tv[j].label + "\n";

                            printTree(tv[j].children, level + 1);
                        }
                    }
                }

                // traverse the node map and tree
                function dumpNodes()
                {
                    buf = "<pre><hr>oTextNodeMap:<br>";

                    for (var i in oTextNodeMap)
                    {
                        buf += oTextNodeMap[i] + "\n";
                    }
                    
                    buf += "<br>Node count: " + oTreeView.getNodeCount() + "<br><br>";
                    var tv = oTreeView.getTreeDefinition();
                    printTree(tv, 0);
                    buf += "</pre>";

                    document.getElementById("treecontents").innerHTML = buf;
                }

                function immutableTextNode(label, childOf)
                {
                    var oTextNode = new YAHOO.widget.TextNode(label, childOf, expanded);
                    oTextNode.editable = false;
                    oTextNodeMap[oTextNode.labelElId] = oTextNode;

                    return oTextNode;
                }

                function mutableTextNode(label, childOf)
                {
                    var oTextNode = new YAHOO.widget.TextNode(label, childOf, expanded);
                    oTextNode.editable = true;
                    oTextNodeMap[oTextNode.labelElId] = oTextNode;

                    return oTextNode;
                }

                // delete the nodes from the node map recursively
                function deleteNodeMapChildren(node)
                {
                    if (node)
                    {
                        for (var i in node)
                        {
                            deleteNodeMapChildren(node[i].children);
                            delete oTextNodeMap[node[i].labelElId];
                        }
                    }
                }

                // callback to delete from the treeView
                function deleteNode()
                {
                    if (oCurrentTextNode.editable)
                    {
                        deleteNodeMapChildren(oCurrentTextNode.children);
                        delete oTextNodeMap[oCurrentTextNode.labelElId];

                        var bRet = oTreeView.removeNode(oCurrentTextNode, true);
                        alert("Delete okay?: " + bRet);

                        oCurrentTextNode = null;
                        oTreeView.render();
                    }
                    else
                    {
                        alert("Attempt to delete an immutable node: " + oCurrentTextNode.label);
                    }

                    dumpNodes();
                }

                // Setup a context menu (right click) for delete
                function onTriggerContextMenu(p_oEvent)
                {
                    var oTarget = this.contextEventTarget;
                    var Dom = YAHOO.util.Dom;

                    var oTextNode = Dom.hasClass(oTarget, "ygtvlabel") ? oTarget : Dom.getAncestorByClassName(oTarget, "ygtvlabel");

                    if (oTextNode)
                    {
                        oCurrentTextNode = oTextNodeMap[oTarget.id];
                    }
                    else
                    {
                        this.cancel();
                    }
                }

                var oContextMenu = new YAHOO.widget.ContextMenu(
                    "mytreecontextmenu",
                    { trigger: "mytreeview", lazyload: true, itemdata: [ { text: "Delete",  onclick: { fn: deleteNode } } ] }
                );

                oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);

                // build and display the tree
                oTextNodeImmutable = immutableTextNode("Immutable Rules", oTreeView.getRoot());
                oTextNodeMutable = mutableTextNode("Mutable Rules", oTreeView.getRoot());
                oTextNode = immutableTextNode("Valid Date", oTextNodeImmutable);
                oTextNodeAnd = mutableTextNode("And", oTextNodeMutable);
                oTextNode = mutableTextNode("After", oTextNodeAnd);
                oTextNode = mutableTextNode("Before", oTextNodeAnd);
                oTreeView.render();
                dumpNodes();
            }
        );
    </script>
</html>
 	  	 
